
//左边第1个饼图
function retRow1Left1Option(data) {

    return {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            right: 0,
            top: 20,
            left: 'auto',
            data: data.xdata,
            textStyle: {
                color: '#12E5FF'
            }
        },
        grid: {
            containLabel: true //包含标签
        },
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            z: 2,
            style: {
                text: data.count,
                fontSize: 20,
                fill: '#12E5FF',
            }
        },
        series: [
            {
                name: '告警分类',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: data.ydata
            }
        ]
    };
}

//左边第2个柱状图
function retRow1Left2Option() {
    return {
        grid: {
            left: 0,
            right: 0,
            bottom: 30,
            top: 10,
        },
        xAxis: {
            type: 'category',
            splitLine: { show: false },
            data: ['总费用', '尖', '峰', '平', '谷'],
            axisLine: {
                lineStyle: {
                    color: '#12E5FF'
                }
            }
        },
        yAxis: {
            type: 'value',
            show: false,
        },
        series: [
            {
                name: '辅助',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    },
                    emphasis: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    }
                },
                data: [0, 1700, 1400, 1200, 300]
            },
            {
                name: '生活费',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'inside'
                    }
                },
                data: [2900, 1200, 300, 200, 900]
            }
        ]
    };
}

//右边第1个饼图
function retRow1Right1Option(data) {
    return  {
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['完成','未完成'],
            textStyle:{
                color:"#eee"
            }
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['告警','巡检','维修'],
                textStyle:{
                    color:'#eee'
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'完成',
                type:'bar',
                data:data.finish,
            },
            {
                name:'未完成',
                type:'bar',
                data:data.undo,
            }
        ],
        textStyle: {
            color: '#3398DB'
        }
    };
}

//右边第2个饼图
function retRow1Right2Option(data) {
    return {
        tooltip: {
            trigger: 'item',
            formatter: function (param) {
                return '<span style="position: absolute;left:-30px;top:-30px;font-size: small">巡检'+param.name+':'+param.value+'</span>'
            },
        },
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            z: 2,
            style: {
                text: data.totalCounts,
                fontSize: 16,
                fill: '#08DAE9',
            }
        },
        series: [
            {
                name: '巡检统计',
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['49%', '57%'],
                startAngle: 0,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: data.finish,
                    name: '完成',
                    itemStyle: {

                    }
                },
                    {
                        value: data.totalCounts-data.finish,
                        name: '未完成',

                    }
                ]
            }
        ]
    };
}

//右边第3个饼图
function retRow1Right3Option(data) {
    return {
        tooltip: {
            trigger: 'item',
            formatter: function (param) {
                return '<span style="position: absolute;left:-30px;top:-30px;font-size: small">维修'+param.name+':'+param.value+'</span>'
            },
        },
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            z: 2,
            style: {
                text: data.totalCounts,
                fontSize: 16,
                fill: '#08DAE9',
            }
        },
        series: [
            {
                name: '维修统计',
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['49%', '57%'],
                startAngle: 0,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: data.finish,
                    name: '完成',
                    itemStyle: {

                    }
                },
                    {
                        value: data.totalCounts-data.finish,
                        name: '未完成',

                    }
                ]
            }
        ]
    };
}

//下边第1个饼图
function retRow22Option(data) {

    return {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['潜质']
            ,
            textStyle: {
                color: '#3398DB'
            }
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: true },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'value',
                boundaryGap: [0, 0.01],
                max:100
            }
        ],
        yAxis: [
            {
                type: 'category',
                data:data.xdata,
            }
        ],
        series: [
            {
                name: '潜质',
                type: 'bar',
                itemStyle:{
                    normal:{
                        color:function (params) {
                            if (params.value>85) {
                                return '#DB1634'

                            }else if (params.value>70){
                                return '#3398DB'

                            } else {
                                return '#DBB52D'
                            }

                        }
                    }
                },
                data: data.ydata
            }
        ],
        textStyle: {
            color: '#3398DB'
        }
    };
}

//下边第2个饼图
function retRow23Option() {

    return  {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他'],
            textStyle:{
                color:'#eee'
            }
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'直达', selected:true},
                    {value:679, name:'营销广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            },
            {
                name:'访问来源',
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        borderWidth: 1,
                        borderRadius: 4,
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            a: {
                                color: '#eee',
                                lineHeight: 22,
                                align: 'center'
                            },
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data:[
                    {value:335, name:'直达'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1048, name:'百度'},
                    {value:251, name:'谷歌'},
                    {value:147, name:'必应'},
                    {value:102, name:'其他'}
                ]
            }
        ]
    };
}

//下边第3个饼图
function retRow24Option(data) {
    var colorList =["#f6d54a","#f69846","#44aff0","#45dbf7","#f845f1","#ad46f3","#5045f6","#4777f5"];
    var colorListSub =['rgba(35,143,56,.5)', 'rgba(26,87,178,.5)', 'rgba(176,75,7,.5)', 'rgba(175,129,8,.5)'];
    return  {
        tooltip: {
            trigger: 'item',
            // formatter: "{b}:({d}%)"
            formatter:function(param){
                return param.name +':'+ param.value;
            },
        },
        grid:{
            top: '0%',
        },
        legend: {
            orient: 'horizontal',
            textStyle:{
                color:'#fff'
            },
            left:'center',
            bottom:'8%',
            data:data.xdata
        },
        series: [
            {
                type:'pie',
                radius: [20, '56%'],
                center:["50%","38%"],
                roseType: 'radius',
                clockwise :false,
                z:10,
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            return colorList[params.dataIndex]
                        },
                        shadowBlur: 20,
                        shadowColor: 'rgba(0, 0, 0, 0.3)'
                    }
                },
                label: {
                    normal: {
                        formatter: function(param){
                            //console.log(param.percent,"param")
                            return Math.round(param.percent)+"%"
                        },
                        textStyle: {
                            backgroundColor:"rgba(3,48,85,0.6)",
                            padding:6
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 10,
                        length2: 10,
                        lineStyle:{
                            width:1
                        }
                    }
                },
                data:data.ydata
            },

            // 中心的圆圈
            {
                radius: ['60%', '62%'],
                center:["50%","38%"],
                color:'#FFFFFF',
                type: 'pie',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                tooltip: {
                    show: false
                },
                data: [{
                    value: data.count,
                    name: '告警总数',
                    itemStyle: {
                        normal: {
                            color: '#5A96FF',
                        }
                    }
                }],
                animation: false
            }
        ]
    };
}

//下边第4个柱状图
function retRow25Option(data) {
    var colorList =["#f6d54a","#f69846","#44aff0","#45dbf7","#f845f1","#ad46f3","#5045f6","#4777f5"];
    var colorListSub =['rgba(35,143,56,.5)', 'rgba(26,87,178,.5)', 'rgba(176,75,7,.5)', 'rgba(175,129,8,.5)'];
    return {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['评分'],
            textStyle: {
                color: '#3398DB'
            }
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: true },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'value',
                boundaryGap: [0, 0.01],
                max:100
            }
        ],
        yAxis: [
            {
                type: 'category',
                data:data.xdata,
            }
        ],
        series: [
            {
                name: '评分',
                type: 'bar',
                itemStyle:{
                    normal:{
                        color:function (params) {
                            if (params.value>85) {
                                return '#3398DB'
                            }else if (params.value>70){
                                return '#DBB52D'
                            } else {
                                return '#DB1634'
                            }

                        }
                    }
                },
                data: data.ydata
            }
        ],
        textStyle: {
            color: '#3398DB'
        }
    };
}

//下边第5个折线面积图
function retRow26Option(data) {
    return {
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top: 20,
            left: 0,
            right: 10,
            bottom: 30,
            containLabel: true,
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: { //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                    color: '#233e64'
                },
            },
            axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                    color: '#6a9cd5',
                    margin: 15,
                },
            },
            axisTick: { show: false, },
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        }],
        yAxis: [{
            type: 'value',
            min: 0,
            splitNumber: 7,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#233e64'
                }
            },
            axisLine: { show: false, },
            axisLabel: {
                margin: 20,
                textStyle: {
                    color: '#6a9cd5',

                },
            },
            axisTick: { show: false, },
        }],
        series: [{
            name: '运维次数',
            type: 'line',
            smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            symbolSize: 0,

            lineStyle: {
                normal: {
                    color: "#3deaff"   // 线条颜色
                }
            },
            areaStyle: { //区域填充样式
                normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(61,234,255, 0.9)' },
                        { offset: 1, color: 'rgba(61,234,255, 0)' }
                    ], false),

                }
            },
            data: data
        }]
    };
}
